<template>
   <div class="infoBox">
        <div class="" v-if="showTab">
            <h2>小程序用户信息</h2>
            <div class="filter-container">
                  <el-input maxlength="64" v-model="listQuery.mobile" placeholder="请输入要查找的手机号" size="medium" style="width: 200px;" class="filter-item"/>
                  <el-select v-model="listQuery.flag" placeholder="请选择小程序" style="margin-left:20px">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="沪尚茗居装修体验馆" value="1"></el-option>
                        <el-option label="沪尚茗居家装服务" value="2"></el-option>
                        <el-option label="沪尚茗居装修服务" value="3"></el-option>
                  </el-select>
                  <el-button class="filter-item" clearable type="primary" size="medium" icon="el-icon-search" @click="handleFilter" style="margin-left:10px">搜索 </el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
               <el-table-column prop="" label="小程序名称" align="center">
                  <template slot-scope="scope">
                     <span v-if="scope.row.flag == 1">沪尚茗居装修体验馆</span>
                     <span v-else>沪尚茗居家装服务</span>
                  </template>
               </el-table-column>
               <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
               <el-table-column prop="mobile" label="手机号" align="center">
                  <template slot-scope="scope">
                        <span v-if="scope.row.mobile_time">{{scope.row.mobile}}</span>
                        <span v-else style="color:red">用户未授权手机号</span>
                  </template>
               </el-table-column>
               <el-table-column prop="avatarUrl" label="头像">
                  <template slot-scope="scope">
                     <img :src="scope.row.avatarUrl" style="max-width:50px">
                  </template>
               </el-table-column>
               <el-table-column prop="province" label="城市" align="center"></el-table-column>
               <el-table-column prop="create_time" label="授权时间" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.create_time | formatDate }}</span>
                  </template>
               </el-table-column>
            </el-table>
            <div class="pagination-container">
               <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                              :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.list_rows"
                              layout="total, sizes, prev, pager, next, jumper" :total="total">
               </el-pagination>
            </div>
        </div>
        <div class="remark" v-else>
              <div class="box">
                     <el-input type="password" placeholder="请输入密码" v-model="pwd"></el-input>
                     <div class="btn-box">
                        <el-button type="primary" style="margin-top:20px;" @click="sureBtn">确定</el-button>
                     </div>
                     
              </div>
        </div>
   </div>
</template>
<script>
  import {formatDate} from '../../utils/common'
  export default{
      data(){
         return{
            tableData: [],
            listQuery:{
                list_rows:10,//每页数量
                page:1, //当前页
                mobile:'',
                flag:'0'
            },
            total:0,
            showTab:false,
            pwd:'',//hsmAdmin
            
         }
      },
      filters: {
         formatDate(time) {
            time = time * 1000
            let date = new Date(time)
            console.log(new Date(time))
            return formatDate(date, 'yyyy-MM-dd hh:mm')
         }
      },
      created(){
           if(sessionStorage.getItem('login-admin')){
                this.showTab = true;
                this.getList()
           } else{
              this.showTab = false
           }
      },
      methods:{
         sureBtn(){
            if(this.$md5(this.$md5(this.pwd)) == '545dc7fdab609a39afd11ca4ae5dfa40'){
                  this.showTab = true;
                  sessionStorage.setItem('login-admin',true); // 存入一个值
                  this.getList()
            }else{
               this.$message.error('密码错误')
            }
            // console.log(this.$md5(this.$md5(this.pwd)))
         },
         getList(){
            this.$axios.get('https://xcx.mingjugroup.net/index/listleavemsg', {
               params: this.listQuery
            }).then(res=>{
               if(res.status == 200){
                    this.tableData = res.data.data;
                    this.total = res.data.total
               }
            })
         },
         handleSizeChange(val) {
            this.listQuery.page = 0;
            this.listQuery.list_rows = val;
            this.getList();
         },
         handleCurrentChange(val) {
            this.listQuery.page = val - 1;
            this.getList();
         },
         handleFilter(){
            this.listQuery.page = 0;
            this.getList();
         }
      },
      destroyed(){
        // clearInterval(this.timer);
        clearInterval(this.requestTimer)
    }
  }
</script>
<style>
  .infoBox h2{
     text-align: center;
  }
  .pagination-container{
     text-align: center;
     margin-top: 20px;
  }
  .filter-container{
     margin: 20px 0;
  }
  .remark{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    display: flex;
    align-items: center;
  }
  .box{
     width: 600px;
     height: 200px;
     margin: 0 auto;
     background: #fff;
     border-radius: 10px;
     padding: 30px;
     box-sizing: border-box;
  }
  .btn-box{
     display: flex;
     align-items: center;
     justify-content: center;
  }
</style>
